<template>
  <div style="width: 100%">
    <vxe-pulldown ref="xDown" style="width: 100%" :transfer="transferRef">
      <template #default>
        <vxe-input
          v-model="treeValue"
          clearable
          :disabled="disabledSel"
          :placeholder="placeholder"
          readonly="readonly"
          :style="{ width: width }"
          type="search"
          @clear="clearInput"
          @click="showTreeePanel"
          @search-click="handleSearchClick"
        />
      </template>
      <template #dropdown>
        <el-input v-if="searchable" v-model="filterText" placeholder="输入关键字进行过滤" style="width: 100%" />
        <vxe-table
          ref="xTable"
          auto-resize
          :data="tableData"
          max-height="300px"
          :radio-config="{
            labelField: 'nodename',
            highlight: true,
            checkRowKey: checkRowUuid,
            visibleMethod: handleVisibleMethod
          }"
          :row-config="{ keyField: 'id' }"
          :show-header="false"
          show-overflow
          :tree-config="{
            transform: true,
            rowField: 'id',
            parentField: 'parentid',
            expandRowKeys: expandRowKeys
          }"
          @radio-change="handleRadioChange"
        >
          <vxe-column tree-node type="radio" />
        </vxe-table>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script setup>
import { postRequest } from "@/api/mains";
import { failMsg } from "@/utils/MessageUtils";

const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: ""
  },
  data: {
    type: Array,
    default: () => {
      return [];
    }
  },
  url: {
    type: String,
    default: () => {
      return "";
    }
  },
  queryForm: {
    type: Object,
    default: () => {
      return {};
    }
  },
  placeholder: {
    type: String,
    default: () => {
      return "请选择";
    }
  },
  disabled: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: "100%"
  },
  searchable: {
    type: Boolean,
    default: () => {
      return true;
    }
  },
  transfer: {
    type: Boolean,
    default: () => {
      return false;
    }
  }
});

const selectValue = ref(props.modelValue);

const emit = defineEmits(["update:model-value", "on-change"]);

const disabledSel = ref(props.disabled);
const transferRef = ref(props.transfer);
const filterText = ref();

const queryFormRef = ref(props.queryForm);
const allData = ref([]);
const tableData = ref([]);
const expandRowKeys = ref([]); //默认展开的行
const checkRowUuid = ref();
const xTable = ref();

const handleRadioChange = ({ row }) => {
  const $pulldown2 = xDown.value;
  treeValue.value = row.nodename;
  selectValue.value = row.id;
  emit("update:model-value", row.id);
  emit("on-change", row);
  //emit('on-select-tree-one', row)
  $pulldown2.hidePanel().then(() => {
    tableData.value = allData.value;
  });
};

const treeValue = ref();
const xDown = ref();

const showTreeePanel = () => {
  if (props.searchable) {
    filterText.value = "";
  }

  const $pulldown2 = xDown.value;
  $pulldown2.showPanel();

  if (selectValue != null && selectValue.value) {
    //xTable.value.setRadioRow(item)
    checkRowUuid.value = selectValue.value;
    //if (typeof xTable.value != 'undefined') {
    //xTable.value.setRadioRow(item)
    //}
  }
};

const handleSearchClick = () => {
  if (!disabledSel.value) {
    showTreeePanel();
  }
};

/*const keyupEvent2 = () => {
    tableData.value = treeValue.value
      ? allData.value.filter(
          (item) => item.nodename.indexOf(treeValue.value) > -1
        )
      : allData.value
  }*/

const clearInput = () => {
  //emit('on-select-tree-one', { id: '', nodename: '' })
  emit("update:model-value", "");
  emit("on-change", {});
};

const handleFetchTreeData = async () => {
  if (props.url != null && typeof props.url != "undefined" && props.url != "") {
    const responseData = await postRequest(props.url, queryFormRef.value);
    if (responseData.code !== 200) {
      failMsg(responseData.msg);
      return;
    }
    tableData.value = responseData.data.rows;
    allData.value = responseData.data.rows;

    responseData.data.rows.forEach(item => {
      if (item.parentid == "0") {
        expandRowKeys.value.push(item.id);
      }

      if (selectValue != null && selectValue.value == item.id) {
        treeValue.value = item.nodename;
        //xTable.value.setRadioRow(item)
        //checkRowUuid.value = selectValue.value
        if (typeof xTable.value != "undefined") {
          xTable.value.setRadioRow(item);
        }
      }
    });
  }
};

const handleVisibleMethod = row => {
  if (row.row.disabled) {
    return false;
  }
  return true;
};

watch(
  () => props.disabled,
  () => {
    disabledSel.value = props.disabled;
  }
);

watch(
  () => props.data,
  newVal => {
    tableData.value = newVal;
    allData.value = newVal;
    newVal.forEach(item => {
      if (item.parentid == "root") {
        expandRowKeys.value.push(item.id);
      }
      if (selectValue != null && selectValue == item.id) {
        treeValue.value = item.nodename;
        //xTable.value.setRadioRow(item)
      }
    });
  }
);

watch(
  () => props.modelValue,
  newVal => {
    selectValue.value = newVal; //点击会多弹出下拉框
    checkRowUuid.value = newVal;
    treeValue.value = "";
    if (typeof xTable.value != "undefined") {
      xTable.value.clearRadioRow();
    }
    allData.value.forEach(item => {
      if (newVal != null && newVal == item.id) {
        treeValue.value = item.nodename;
        if (typeof xTable.value != "undefined") {
          xTable.value.setRadioRow(item);
        }
        return;
      }
    });
  }
);

watch(
  () => props.url,
  () => {
    handleFetchTreeData();
  }
);

watch(
  () => filterText.value,
  val => {
    if (val == null || val.trim() == "") {
      tableData.value = allData.value;
    } else {
      const filterdatas = [];
      allData.value.forEach(item => {
        if (item.nodename.indexOf(val) >= 0) {
          filterdatas.push(item);
        }
      });
      tableData.value = filterdatas;
    }
  }
);

onMounted(() => {
  handleFetchTreeData();
});
</script>
<style lang="scss" scoped>
// .down-tree {
//   width: 100%;
//   height: 55vh;
//   margin-top: 10px;
//   overflow: auto;
// }
:deep(.vxe-table--body) {
  .vxe-body--column {
    background-image: none;
  }
}
</style>
